<template>
    <!-- 单个工单的弹框 -->
    <el-dialog title="创建工单" :visible.sync="dialog_visible" width="70%" :close-on-click-modal="false" center>
      <div class="wk-container">
        <div class="wk-img wk-container-item" style="margin-right: 15px;display: flex;flex-direction: column;justify-content: space-evenly;">
          <el-image style="width: auto;height: auto;" :src="img_url"></el-image>
          <div class="edit-img" @click="editPicture">编辑图片</div>
        </div>
        <div class="wk-info wk-container-item" style="margin-left: 5px;">
          <el-form ref="dataForm" :rules="rules" :model="wk_form" label-position="right" label-width="85px">
            <el-form-item label="所属网点:">
              <el-input v-model="singleGraphName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="评检项:" prop="workorder_type">
              <el-select v-model="wk_form.workorder_type" filterable reserve-keyword placeholder="工单类型" style="width: 100%" clearable >
                <el-option-group v-for="group in list_workorder" :key="group.id" :label="group.name">
                  <el-option v-for="item in group.items" :key="item.id" :label="item.name" :value="item.id" />
                </el-option-group>
                <!-- <el-option v-for="item in list_workorder" :key="item.id" :label="item.name" :value="item.id" /> -->
              </el-select>
            </el-form-item>
            <el-form-item label="优先级:" prop="priority">
              <el-select v-model="wk_form.priority" filterable reserve-keyword placeholder="优先级" style="width: 100%" clearable >
                <el-option v-for="item in list_priority" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="处理时限:" prop="dealWithTime">

              <el-date-picker
              :default-value="new Date()"
              style="width: 100%"
              v-model="wk_form.dealWithTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions0"
              @change="handle" />

            </el-form-item>
            <el-form-item label="指派给:" prop="dealWithUserId">
              <el-select v-model="wk_form.dealWithUserId" filterable reserve-keyword placeholder="指派给" style="width: 100%" clearable >
                <el-option v-for="item in list_user" :key="item.id" :label="item.realName" :value="item.userId" />
              </el-select>
            </el-form-item>
            <el-form-item label="抄送至:" prop="copyUserId">
              <el-select v-model="wk_form.copyUserId" filterable reserve-keyword placeholder="抄送至" style="width: 100%" clearable >
                <el-option v-for="item in list_user" :key="item.id" :label="item.realName" :value="item.userId" />
              </el-select>
            </el-form-item>
            <el-form-item label="备注:">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入备注" ref="wk_form_remark" key="remark" v-model="wk_form.remark" name="remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button class="plain-btn" @click="dialog_visible = false">取消</el-button>
        <el-button class="fill-btn" @click="commitWorkorder">提交</el-button>
      </div>
    </el-dialog>
</template>

<script>
import { workorderAdd, uploadWkImg} from '@/api/workorder'
import AddrBranch from "@/components/Address/AddrBranchSelectRegister.vue";

export default {
  name: 'DialogWk',
  props: {
    singleGraphID: {
      type: [Number, String],
      default: ''
    },
    singleGraphName: {
      type: [Number, String],
      default: ''
    },
    device_id: {
      type: [Number, String],
      default: ''
    },
    channel_id: {
      type: [Number, String],
      default: ''
    },
    index: {
      type: [Number, String],
      default: ''
    },
    branchinfo: {
      type: [Object],
      default: () => { return {id:'', name: '' } }
    },
    img_url: {   // 图片文件 base64
      type: String,
      default: ''
    },
  },
  components: {
    AddrBranch
  },
  data() {
    return {
      pickerOptions0: {
        disabledDate:(time)=> {
	        return time.getTime() < Date.now()-1 * 24 * 3600 * 1000
	      }
      },
      dialog_visible: false,
      workorder_type: '',   // 工单类型
      wk_form: {   // 单个摄像设备 的工单
        pointId: '',   // 网点id
        checkItemIds: [],   // 工单类型[]  数组
        priority: '',   // 优先级
        dealWithUserId: '',   // 指派给( 处理人 )
        copyUserId: '',   // 抄送至
        remark: '',   // 备注
        workOrderDeviceChannels: [],
        pictureId: [],
        pictureType: 'rectify-before',
        dealWithTime: '',
        workorder_type: ''
      },
      list_workorder: [],
      list_priority: [{id:1, label: '高(1天)'}, {id: 2, label: '中(2天)'}, {id: 3, label: '低(7天)'}],
      list_user: '',
      rules: {
        workorder_type: [{
          required: true,
          trigger: "change",
          message: "请选择评检项",
        }, ],
        priority: [{
          required: true,
          trigger: "change",
          message: "请选择优先级",
        }, ],
        dealWithTime: [{
          required: true,
          trigger: "change",
          message: "请选择时限",
        }, ],
        dealWithUserId: [{
          required: true,
          trigger: "change",
          message: "请选择指派人",
        }, ],
        copyUserId: [{
          required: true,
          trigger: "change",
          message: "请选择抄送人",
        }, ]
      }
    }
  },
  computed: {

  },
  mounted() {

  },

  beforeDestroy() {
    
  },

  watch: {
    // branchinfo(newval, old) { 
    //   this.wk_form.pointId = newval.id
    // },
    img_url(newval, old) {
      this.list_workorder = this.$store.getters.list_workorder || []
      this.list_user = this.$store.getters.list_user || []

      console.log('变化了', this.list_user);

      this.dialog_visible = true 
      },
  },

  methods: {
    // 时间精确到当前以前
    handle () {
      console.log('触发精确分秒 :>> ', this.wk_form.dealWithTime)
      var startAt = new Date(this.wk_form.dealWithTime) * 1000 /1000
      if(startAt < Date.now()) {
        this.$notify({
          title: "警告",
          message: '选择此刻后的时间会导致工单预期',
          type: 'warning',
          duration: 4000
        })
      }
      console.log('触发精确分秒 :>> ', this.wk_form.dealWithTime)
    },
    // 关闭
    close() {
      this.dialog_visible = true
    },
    // 编辑图片
    editPicture() {
      this.dialog_visible = false
      this.$parent.displayPicture()
    },
    // 提交工单
    commitWorkorder() {
      console.log('this.singleGraphID :>> ', this.singleGraphID);
      this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // console.log('能拿到吗1 :>> ', this.device_id)
            // console.log('能拿到吗1 :>> ', this.channel_id)
            // console.log('参数 :>> ', this.wk_form)
                this.wk_form.checkItemIds.push(this.wk_form.workorder_type)
                this.wk_form.workOrderDeviceChannels.push(
                  {
                    deviceId: this.device_id,
                    channelId: this.channel_id
                  }
                )
                console.log('提交二次数据 :>> ', this.wk_form);

                workorderAdd([{
                  pointId: this.singleGraphID,
                  base64Picture: this.img_url,
                  dealWithUserId: this.wk_form.dealWithUserId,
                  dealWithTime: this.wk_form.dealWithTime,
                  priority: this.wk_form.priority,
                  copyUserId: this.wk_form.copyUserId,
                  remark: this.wk_form.remark,
                  checkItemIds: this.wk_form.checkItemIds,
                  pictureType: this.wk_form.pictureType,
                  workOrderDeviceChannels: this.wk_form.workOrderDeviceChannels,
                  imgCreateTime: this.$parent.imgTime
                }]).then(res => {
                  if(res.code == 0) {
                    this.dialog_visible = false

                    this.$emit('closeCanvas')

                    this.$notify({
                      title: '成功',
                      message: '创建成功',
                      type: 'success',
                      duration: 4000
                    })
                  }
                })




          }
      })
    }
  }
}
</script>

<style lang="scss">
  .el-dialog {
    .el-dialog__header {
      background-color: #f5f7f5 !important;
    }
  }
</style>

<style lang="scss" scoped>
$theme_text: #0f8bfd;
$backg: rgba(0, 0, 0, 0);
$deep_text: #5e5e5e;

$border_color: #d4d4d4;
$border_light: #d9dada;
$theme: #00805a;
$theme_bg: #2b303b;
$text_light: #9fa1a2;
$text_middle: #c0c0c0;
$text_dark: #2b303b;
$obj_white: #ffffff;

.el-dialog {
  .wk-container {
    height: 60vh;
    min-height: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .wk-container-item {
      flex: 1;
      height: 100%;
    }
    .wk-img {
      flex: 1;
      .el-image {
        width: 100%;
        height: 100%;
      }
      .edit-img {
        cursor: pointer;
        color: $theme;
        text-align: right;
        font-size: 12px;
        padding-right: 5px;
      }
    }
    .wk-info {
      flex: 1;
    }
  }
}
</style>
